<template>
  <div class="app-container">
    <div class="details">
      <div class="detailsDiv">
        <div class="dialogDom" v-if="detailsInfo.dataType != 'comment' && detailsInfo.dataType != 'commentReply'">
          <div><span>监控内容类型:</span> {{ detailsInfo.dataTypeDesc }}</div>
          <div><span>监控类型:</span>{{ detailsInfo.tagDesc }}</div>
          <div><span>监控等级:</span>{{ detailsInfo.riskLevelDesc }}</div>
          <div><span>纳入监控时间: </span>{{ detailsInfo.createTime }}</div>
        </div>

        <div class="dialogDom" v-if="detailsInfo.dataType != 'comment' && detailsInfo.dataType != 'commentReply'">
          <div><span>原文创作者:</span>{{ detailsInfo.publisherName }}</div>
          <div><span>原文创作者ID:</span>{{ detailsInfo.publisherId }}</div>
          <div><span>是否实名认证:</span>{{ detailsInfo.realStatus == null ? '未认证' : detailsInfo.realStatus }}</div>
          <div><span>创作者IP:</span>{{ detailsInfo.publisherIp }}</div>
          <div><span>创作者手机号:</span>{{ detailsInfo.publisherMobile }}</div>
        </div>

        <div class="dialogDom" v-if="detailsInfo.dataType == 'comment' || detailsInfo.dataType == 'commentReply'">
          <div><span>评论发布人:</span>{{ detailsInfo.commentUserName }}</div>
          <div><span>评论发布人ID:</span>{{ detailsInfo.commentUserId }}</div>
          <div><span>评论发布手机号:</span>{{ detailsInfo.commentUserMobile }}</div>
          <div><span>评论发布人IP:</span>{{ detailsInfo.commentUserIp }}</div>
          <div><span>纳入监控时间:</span>{{ detailsInfo.createTime }}</div>
        </div>
        <div class="dialogDom" v-if="detailsInfo.dataType == 'comment' || detailsInfo.dataType == 'commentReply'">
          <div><span>是否实名认证:</span>{{ detailsInfo.commentRealStatus == null ? '未认证' : detailsInfo.commentRealStatus }}
          </div>
          <div><span>评论时间 :</span>{{ detailsInfo.commentTime }}</div>
        </div>
      </div>
      <div class="detailsDiv">
        <div class="dialogDom" v-if="detailsInfo.dataType != 'comment' && detailsInfo.dataType != 'commentReply'">
          <div><span>内容观看总数:</span>{{ detailsInfo.viewCount }}</div>
          <div><span>内容收藏数:</span>{{ detailsInfo.collectCount }}</div>
          <div><span>内容点赞数:</span>{{ detailsInfo.likeCount }}</div>
          <div><span>分享转发数:</span>{{ detailsInfo.shareCount }}</div>
          <div><span>举报数:</span>{{ detailsInfo.reportCount == null ? '0' : detailsInfo.reportCount }}</div>
        </div>
        <div class="dialogDom" v-if="detailsInfo.dataType == 'comment' || detailsInfo.dataType == 'commentReply'">
          <div v-if="detailsInfo.dataType == 'comment'"><span>回复评论总数:</span>{{ detailsInfo.replyCount }}</div>
          <div><span>评论点赞数:</span>{{ detailsInfo.commentLikeCount }}</div>
          <div v-if="detailsInfo.dataType == 'comment'"><span>评论转发数:</span>{{ detailsInfo.commentShareCount }}</div>
        </div>
      </div>
      <div class="detailsDiv">
        <div class="dialogDom">
          <div><span>审核类型:</span> {{ detailsInfo.tagDesc }}</div>
          <div><span>审核结果:</span> {{ detailsInfo.auditResultDesc }}</div>
          <div><span>审核说明:</span>{{ detailsInfo.auditDesc }}</div>
          <div><span>审核状态:</span>{{ detailsInfo.auditStatusDesc }}</div>
          <div><span>审核时间: </span>{{ detailsInfo.auditTime }}</div>
        </div>
      </div>
      <div class="detailsDiv">
        <div class="dialogDom"><span>视频或图片：</span></div>
        <div v-for="(item, index) in detailsInfo.imgPics" class="imgPics">
          <img :src="item" />
        </div>
        <div v-for="(item, index) in detailsInfo.playInfo" class="imgPics">
          <video :src="item.playUrl" controls></video>
        </div>
      </div>
      <div class="detailsDiv">
        <div>
          <div class="dialogDiv">
            <span>原文标题:</span>
            <div class="dialogDivCon">{{ detailsInfo.title }}</div>
          </div>
          <div class="dialogDiv">
            <span>原文链接:</span>
            <div class="dialogDivCon">
              <a :href="detailsInfo.link" target="_blank">{{ detailsInfo.link }}</a>
            </div>
          </div>
          <div class="dialogDiv" v-if="detailsInfo.dataType == 'article'">
            <span>内容:</span>
            <div class="dialogDivCon" v-html="detailsInfo.content"></div>
          </div>
          <div class="dialogDiv" v-if="detailsInfo.dataType == 'comment' || detailsInfo.dataType == 'commentReply'">
            <span>评论内容:</span>
            <div class="dialogDivCon" v-html="detailsInfo.commentContent"></div>
          </div>
        </div>
      </div>
      <div class="detailsDiv" v-if="detailsInfo.auditStatusDesc == '待审核'">
        <el-form :model="form" class="el-form">
          <el-form-item label="审核状态" :label-width="formLabelWidth">
            <el-select v-model="form.auditStatus" placeholder="全部状态">
              <el-option v-for="item in formAuditStatus" :key="item.value" :label="item.label" :value="item.value">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="审核类型" :label-width="formLabelWidth">
            <el-select v-model="form.tag" placeholder="全部类型">
              <el-option v-for="item in monitoringType" :key="item.value" :label="item.label" :value="item.value">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="审核结果" :label-width="formLabelWidth">
            <el-select v-model="form.auditResult" placeholder="全部">
              <el-option v-for="item in auditResultList" :key="item.value" :label="item.label" :value="item.value">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="结果说明" :label-width="formLabelWidth">
            <el-input type="textarea" v-model="form.auditDesc" :rows="3" placeholder="请输入审核说明" />
          </el-form-item>
        </el-form>
        <div class="dialog-footer">
          <el-button type="primary" @click="auditRecordAudit()">提交审核</el-button>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { auditRecordId, getByBizIdAndDataType, auditRecordAudit } from '/@/api/admin/monitor';
import { useMessage } from '/@/hooks/message';
export default {
	name: 'Online',
	data() {
		return {
			outerVisible: false,
			// 遮罩层
			loading: true,
			// 总条数
			total: 0,
			form: {},
			monitoringType: [
				{
					value: '',
					label: '全部类型',
				},
				{
					value: 'audit_label_pornography',
					label: '涉黄',
				},
				{
					value: 'audit_label_politics',
					label: '涉政',
				},
				{
					value: 'audit_label_drugs',
					label: '涉毒',
				},
				{
					value: 'audit_label_gambling',
					label: '涉赌',
				},
				{
					value: 'audit_label_religion',
					label: '宗教',
				},
				{
					value: 'audit_label_superstition',
					label: '迷信',
				},
				{
					value: 'audit_label_terrorism',
					label: '涉恐',
				},
				{
					value: 'audit_label_other',
					label: '其他',
				},
				{
					value: 'audit_label_none',
					label: '无风险',
				},
			],
			auditResultList: [
				{
					value: '',
					label: '全部类型',
				},
				{
					value: 'pass',
					label: '无违法信息',
				},
				{
					value: 'illegal',
					label: '涉嫌违法信息',
				},
				{
					value: 'audit_result',
					label: '持续监控信息',
				},
			],
			formAuditStatus: [
				{
					value: 'approved',
					label: '已审核',
				},
				{
					value: 'rejected',
					label: '未通过',
				},
			],
			// 表格数据
			list: [],
			pageNum: 1,
			pageSize: 10,
			// 查询参数
			detailsInfo: {},
			queryParams: {
				ipaddr: undefined,
				userName: undefined,
			},
		};
	},

	created() {
		if (this.$route.query.bizId) {
			this.getByBizIdAndDataType();
		} else {
			this.auditRecordId();
		}
	},
	methods: {
		auditRecordAudit() {
			this.form.id = this.detailsInfo.id;
			let data = this.form;
			auditRecordAudit(data)
				.then((res) => {
					if (res.code == 0) {
						useMessage().success(res.data);
						if (this.$route.query.bizId) {
							this.getByBizIdAndDataType();
						} else {
							this.auditRecordId();
						}
					}
				})
				.catch((err) => {});
		},
		auditRecordId() {
			let data = {
				id: this.$route.query.id,
				userId: this.$route.query.userId,
			};
			auditRecordId(data).then((res) => {
				this.detailsInfo = res.data;
				// useMessage().success(res.msg || '查询成功');
			});
		},
		getByBizIdAndDataType() {
			let data = {
				bizId: this.$route.query.bizId,
				dataType: this.$route.query.dataType,
			};
			getByBizIdAndDataType(data).then((res) => {
				this.detailsInfo = res.data;
				// useMessage().success(res.msg || '查询成功');
			});
		},
	},
};
</script>
<style lang="scss" scoped>
.details {
  font-size: 14px;
  color: #666;
  width: 98%;
  margin: 1% auto;
}

.detailsDiv {
  border-bottom: 1px solid #e3e3e3;
  margin-bottom: 0.5%;
  padding: 10px 20px;
  background-color: #fff;
  font-size: 16px;
}

.dialogDom {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  text-align: left;
  margin: 15px 0;
  color: #999;
  flex-wrap: wrap;

  span {
    color: #333;
    margin-right: 10px;
  }

  >div {
    width: 20%;
    min-width: 300px;
  }
}

.dialogDiv {
  margin: 15px 0;
  color: #999;
  margin: 15px 0;
  color: #999;
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;

  .dialogDivCon {
    width: 70%;

    a {
      text-decoration: underline;
    }
  }

  span {
    color: #333;
    margin-right: 10px;
  }
}

.imgPics {
  width: 18%;
  display: inline-block;
  margin: 1%;

  img {
    width: 100%;
    display: block;
  }
}

.el-form {
  width: 50%;
  padding: 20px;
}

.dialog-footer {
  width: 50%;
  text-align: center;
  margin: 20px 0;
}
</style>
